<script >
import {getUser, addUser, editUser, delUser} from "@/api";

export default {
    data() {
      return {
        dialogVisible: false,
        form: {
          name: '',
          age: '',
          sex: '',
          birth: '',
          addr: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名' }
          ],
          age: [
            { required: true, message: '请输入年龄' }
          ],
          sex: [
            { required: true, message: '请选择性别' }
          ],
          birth: [
            { required: true, message: '选择日期时间' }
          ],
          addr: [
            { required: true, message: '请输入地址' }
          ]
        },
        tableData: [],
        modelType: 0, // 0 表示新增， 1 表示编辑
        total: 0, // 数据页数
        // 分页参数
        pageData: {
          page: 1,
          limit: 10
        },
        // 查询信息
        userForm: {
          name: ''
        }
      }
    },
    methods: {
      // 提交表单
      submit() {
        this.$refs.form.validate((vaild) => {
          if(vaild) {
            if(this.modelType === 0) {
              // console.log('form', this.form)
              addUser(this.form).then(() => {
                this.getList()
              })
            }else{
              editUser(this.form).then(() => {
                this.getList()
              })
            }
            // 重置表单
            this.$refs.form.resetFields()
            // 关闭弹窗
            this.dialogVisible = false
          }
        })
      },
      // 用户编辑按钮
      handleEdit(row) {
        this.modelType = 1
        this.dialogVisible = true
        // 要深拷贝，否则在修改表单时，会影响保存的数据
        this.form = JSON.parse(JSON.stringify(row))
      },
      // 用户页的新增按钮
      handleAdd() {
        this.dialogVisible = true
        this.modelType = 0
      },
      // 用户页的删除按钮
      handleDelete(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delUser({id: row.id}).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 点击叉号
      handleClose() {
        this.$refs.form.resetFields()
        this.dialogVisible = false
      },
      // 点击取消
      cancel() {
        this.handleClose()
      },
      onSubmit() {
        this.getList()
      },

      // 获取用户列表
      getList() {
        getUser({params: {...this.userForm, ...this.pageData}}).then(res => {
          this.tableData = res.data.list
          this.total = res.data.count || 0
        })
      },
      // 分页函数
      pageChange(val) {
        this.pageData.page = val
        this.getList()
      }
    },

    created() {
      this.getList()
    }
}
</script>

<template>
  <div class="user-container">
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        width="40%">
        <!--    表单组件    -->
        <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option label="男" :value='1'></el-option>
              <el-option label="女" :value='0'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期" prop="birth">
            <el-date-picker
                v-model="form.birth"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="地址" prop="addr">
            <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
    </el-dialog>
    <div class="user-header">
      <el-button type="primary" @click="handleAdd" >+ 新增</el-button>
      <!--   form 的搜索区域   -->
      <el-form :inline="true" :model="userForm">
        <el-form-item >
          <el-input v-model="userForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="common-table">
      <el-table
          stripe
          height="90%"
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
          <template slot-scope="scope">
            <span >{{ scope.row.sex == 0 ? '女' : '男'  }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="age"
            label="年龄">
        </el-table-column>
        <el-table-column
            prop="birth"
            label="出生日期">
        </el-table-column>
        <el-table-column
            prop="addr"
            label="地址">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
            layout="prev, pager, next"
            :total="total"
            @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.user-container {
  height: 90%;
  .user-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .common-table {
    position: relative;
    height: calc(100% - 62px);
    .pager {
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }
}

</style>